import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Slider } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import { http } from '../../utils/http'
import { CHANGE_RATE } from '../../constants/api'
import {GetRequest,vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"

export default class AdjustRate extends Component {
    state: {
        submiting: boolean
        rate: number
        childSellerStr: string
    } = {
        submiting: false,
        rate: 80,
        childSellerStr: ''
    }
    componentDidShow(){
        vcmonitor(this)
    }
    async UNSAFE_componentWillMount() {
      if(process.env.TARO_ENV==='h5'){
        await h5Wx.getConfig()
      }
      if(!Taro.getCurrentInstance().router.params.selectedSellerId) {
          Taro.showModal({
              content: '参数错误',
              showCancel: false,
              success: (res) => {
                  if(res.confirm) {
                      Taro.navigateBack()
                  }
              }
          })
      }
      this.setState({ childSellerStr: Taro.getCurrentInstance().router.params.selectedSellerId, rate: parseInt(Taro.getCurrentInstance().router.params.rate) || 80 })
    }
    sliderChange(res) {
        this.setState({ rate: res.detail.value })
    }
    async submit() {
        const {childSellerStr, rate} = this.state
        this.setState({ submiting: true }, async () => {
            Taro.showLoading({ title: '提交中...' })
            const ret = await http.post<boolean>(CHANGE_RATE, {childSellerStr, rate})
            Taro.hideLoading()
            this.setState({ submiting: false })
            if(ret){
                Taro.showModal({
                    content: '操作成功',
                    showCancel: false,
                    success: (res) => {
                        if(res.confirm) {
                            Taro.navigateBack()
                        }
                    }
                })
            } else {
                this.setState({ submiting: false })
            }
        })
    }
    render() {
        const { submiting, rate } = this.state
        return (
            <View className='adjust-rate' style='width:100%;box-sizing:border-box;padding: 0 20px;'>
                <GzhAuth />
                <View className='title' style='text-align:center;width:100%; padding: 30px 0 10px;font-size: 20px;font-weight: 400;'>{process.env.fxName}分成比例设置</View>
                <View className='content' style='margin-top: 5px; color: #888; text-align: center; font-size: 14px; '>设置当前下属{process.env.fxName}的分成百分比，值越大下属{process.env.fxName}获得返利越多，设置完成之后新订单将按新的分成比例分成</View>
                <View className='silder-box' style='padding: 20px 0;'>
                    <Slider step={1} min={0} max={100} value={rate} showValue onChange={this.sliderChange.bind(this)} activeColor={`${process.env.mainColor}`} backgroundColor='#ccc' blockColor={`${process.env.mainColor}`}></Slider>
                </View>
                <View className='btn-box' style='padding: 30px 0;'>
                    <AtButton type='primary' loading={submiting} disabled={submiting} onClick={this.submit.bind(this)} >确定</AtButton>
                </View>
            </View>
        )
    }
}
